
.opacity-transition() {
	-webkit-transition: opacity 1s ease-in-out;
	-moz-transition: opacity 1s ease-in-out;
	-ms-transition: opacity 1s ease-in-out;
	-o-transition: opacity 1s ease-in-out;
	transition: opacity 1s ease-in-out;
}

.opacity-transition-reset() {
	-webkit-transition: none;
	-moz-transition: none;
	-ms-transition: none;
	-o-transition: none;
	transition: none;
}

img, p, span, h1, h2, h3, div, span, canvas {
	.opacity-transition();
}

.ui-transition-element {
	.opacity-transition-reset();
}

.vision_steps(@counter) when (@counter >= 0) {
	.vision_steps(@counter - 1);
	.vision-step-@{counter} {
		@is-low-vision: @counter < 3;
		@is-high-vision: @counter > 9;
		
		#grid-main {			
			// all game elements
			opacity: min(1, 0.5 + @counter * 0.09);
			
			// images
			img {
				filter: grayscale(max(0, round(1 - (@counter - 3) * 0.25, 1)));
			}
			
			img, .canvas-container canvas, .vision-image, .vis-container {
				opacity: min(1, 0.15 + @counter * 0.17);
			}
			
			.vision-container {
				opacity: min(1, 0.15 + @counter * 0.15);
			}
			
			// test
			p, h1, h2, h3, .vision-text, .stat-indicator, .list-amount, .item-name, #mainmap-sector-details-content td, #log span {
				opacity: min(1, 0.5 + @counter * 0.10);
			}
		}
	}
}

.vision_steps(10);
